<template>
	<view class="container">
		<view class="group-box">
			<view class="form-uni-list">
				<uni-forms ref="form">
					<uni-forms-item label="姓名" name="idName" class="list-box">
						<uni-easyinput :disabled="idData.lock==1" type="text" v-model="idData.idName"
							placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="身份证号" name="idNo" class="list-box">
						<uni-easyinput :disabled="idData.lock==1" mode="tag" v-model="idData.idNo"
							placeholder="请输入身份证号" />
					</uni-forms-item>

					<Rboy-upload-sfz :isLock="idData.lock" :obverse-url="$api.loadFile(idData.idFrontPhoto)"
						:reverse-url="$api.loadFile(idData.idBackPhoto)" @selectChange="uploadIdCard"
						@del="del_btn"></Rboy-upload-sfz>

					<view class="form-foot">
						<button v-if="idData.lock==0" @click="submitForm" class="btn submit">确认提交</button>
					</view>
				</uni-forms>
			</view>

		</view>

	</view>
</template>

<script>
	import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"

	export default {
		components: {
			RboyUploadSfz,
		},
		data() {
			return {
				isInputDisabled: false,
				idData: {
					idName: "",
					idNo: "",
					idFrontPhoto: "",
					idBackPhoto: "",
					lock: 0,
				},

				rules: {
					idName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					idNo: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号',
						}]
					},
					idFrontPhoto: {
						rules: [{
							required: true,
							errorMessage: '请上传身份证正面照片',
						}, ]
					},
					idBackPhoto: {
						rules: [{
							required: true,
							errorMessage: '请上传身份证背面照片',
						}, ]
					},
				},

			}
		},
		methods: {
			//初始化数据
			async initData() {
				let _this = this;

				//正在加载
				uni.showLoading({
					title: '加载中'
				});
				//获取会员信息
				await _this.$api.request({
					url: "/account/member",
				}).then((res) => {
					_this.idData = res.data;
					console.log(res.data)
				});
				//关闭加载
				uni.hideLoading();
			},

			// 删除
			del_btn(e) {
				if (e.name == "obverse") {
					this.idData.idFrontPhoto = ""
				} else if (e.name == "reverse") {
					this.idData.idBackPhoto = ""
				}
			},

			// 身份证上传
			async uploadIdCard(e) {
				let _this = this;
				//上传图片
				await _this.$api.request({
					url: `/upload`,
					method: "file",
					data: {
						filePath: e.tempFilePath
					},
				}).then(res => {
					const imgList = JSON.parse(res.data);

					if (e.name == 'obverse') {
						_this.idData.idFrontPhoto = imgList[0].filePath;
					} else {
						_this.idData.idBackPhoto = imgList[0].filePath;
					}
					//更新会员认证信息
					_this.$api.request({
						url: `/account/member/info`,
						method: "put",
						data: _this.idData,
					}).then(res => {
						_this.$api.msg(`上传成功`, 1500, false, 'success');
					});
				});
			},

			//提交表单
			submitForm() {
				let _this = this;
				_this.$refs.form.validate().then(async res => {
					await this.$api.request({
						url: `/account/member/info`,
						method: "put",
						data: _this.idData,
						load: true
					}).then(res => {
						_this.$api.msg(`更新成功`, 1500, false, 'success');
						setTimeout(() => {
							_this.initData();
						}, 1000);

					});
				}).catch(err => {
					//console.log('表单错误信息：', err);
				});
			}
		},
		//页面初始化
		onLoad(options) {
			this.initData();
		},
	}
</script>